<script lang="ts" setup>

import { Search, Refresh } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import * as _ from "lodash"

const currentPage = ref(1)
const pageSize = ref(4)
const dynasty = ref('')
const subject = ref('')
const totalpage = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogname = ref()
const displaydel = ref(false)
const value = ref('')
const title = ref('')
const time = ref(new Date())


const handleSizeChange = (size) => {
    pageSize.value = size
    shiciData()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    shiciData()
}
import {
    Delete,
    Edit,
    WarningFilled
} from '@element-plus/icons-vue'

import { shicilistServer } from '@/api/shici.js';
import { ElMessage, FormRules } from 'element-plus';
import { postlistServer } from '@/api/mpost.js';
import { sectionlistServer } from '@/api/section.js';
import { alistServer } from '@/api/active.js';

const shicidata = ref()
const postdata = ref()
const sectiondata = ref()
const activedata = ref()
const checked = [false, false, false, false, false, false, false]
const checked2 = [false, false, false, false]
const dynastydata = ["曹操诗集", "宋诗", "唐诗", "诗经", "纳兰性德诗集", "现代诗", "楚辞"]
const tuidata = ["春江花月夜", "离骚", "水调歌头", "东陵"]


const shiciData = async () => {
    let params = {
        countpage: currentPage.value,
        pagenumber: pageSize.value,
        dynasty: dynasty.value ? dynasty.value : null,
        title: title.value ? title.value : null,
        subject: subject.value ? subject.value : null

    }

    let result = await shicilistServer(params)

    shicidata.value = result.data.items
    totalpage.value = result.data.total
}

shiciData();

const postData = async () => {

    let result = await postlistServer()

    postdata.value = result.data
}


postData();

const sectionData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 5,
    }

    let result = await sectionlistServer(params)
    sectiondata.value = result.data.items
}

sectionData();

const activeData = async () => {

    let result = await alistServer()

    activedata.value = result.data
}

activeData();

const change = (data, index) => {
    checked[index] = !checked[index]
    if (checked[index]) {
        subject.value = data;
        shiciData();
    }
    if (!checked[index]) {
        subject.value = "";
        shiciData();
    }

}
const change2 = (data, index) => {
    checked2[index] = !checked2[index]
    if (checked2[index]) {
        title.value = data;
        shiciData();
    }
    if (!checked2[index]) {
        subject.value = "";
        shiciData();
    }

}
import { findshici2, findshicicontent, findshiciname } from '@/api/shici.js';
const titles = ref([])
const search = async () => {
    if (title.value == '') {
        shiciData();
        return true
    }
    let result = await findshici2(title.value) as any;
    shicidata.value = result.data.items
    totalpage.value = result.data.total
}
const titlelist = () =>{
    titles.value.push(title.value)
}

</script>

<template>
    <div class="home">
        <el-container>
            <el-header>
                <el-input v-model="title" style="max-width: 600px;" class="input-with-select" clearable>
                    <template #prepend>
                        <el-select v-model="dynasty" placeholder="朝代" style="width: 115px">
                            <el-option label="宋朝" value="宋朝" />
                            <el-option label="唐朝" value="唐朝" />
                            <el-option label="三国" value="三国" />
                            <el-option label="战国" value="战国" />
                            <el-option label="西汉" value="西汉" />
                            <el-option label="东汉" value="东汉" />
                            <el-option label="清朝" value="清朝" />
                            <el-option label="春秋" value="春秋" />
                            <el-option label="现代" value="现代" />
                            <el-option label="无" value="" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="search();titlelist()" />
                    </template>
                </el-input>
            </el-header>
            <el-main>
                <div class="list">
                    <el-container>
                        <el-aside width=60%>
                            <div style="margin-left: 270px;">
                                <el-check-tag :checked="checked[index]" type="warning" @click="change(data, index)"
                                    v-for="(data, index) in dynastydata">
                                    {{ data }}
                                </el-check-tag>
                            </div>
                            <div style="margin-left: 270px;">
                                <el-check-tag :checked="checked2[index]" type="warning" @click="change2(data, index)"
                                    v-for="(data, index) in tuidata">
                                    {{ data }}
                                </el-check-tag>
                            </div>
                            <el-card style="max-width: 680px" v-for="data in shicidata">
                                <template #header>
                                    <div class="card-header">
                                        <el-text tag="b" size="large">{{ data.title }}</el-text>
                                        <el-text tag="sub" size="small">{{ data.author }}</el-text>
                                    </div>
                                </template>
                                <el-text tag="p" size="small">{{ data.paragraphs }}</el-text>
                                <template #footer>
                                    <el-text tag="i">{{ data.dynasty + " " + data.subject }}</el-text>
                                </template>
                            </el-card>
                            <el-pagination style="margin-left: 270px;" class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[4, 8, 12, 16]" :small="small" :disabled="disabled"
                                :background="background" layout="jumper, prev, pager, next, sizes, total"
                                :total="totalpage" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </el-aside>
                        <el-main width=40%>
                            <el-card>
                                <el-text tag="b" size="large">搜索历史</el-text>
                                <el-row v-for="data in titles">
                                <el-text tag="i">{{ data }}</el-text>
                            </el-row>
                            </el-card>
                            <el-card style="max-width: auto;background-color: #F0EFE2">
                                <el-tabs type="border-card">
                                    <el-tab-pane label="热帖">
                                        <el-row v-for="(pdata, index) in postdata">
                                            <el-badge :value="index + 1" class="item" color="green"></el-badge>
                                            <el-text tag="b" size="defalut">{{ pdata.title }}</el-text>
                                            <el-text tag="sub" size="small">{{ pdata.name }}</el-text>
                                        </el-row>
                                    </el-tab-pane>
                                    <el-tab-pane label="版块">
                                        <el-row v-for="(sdata, index) in sectiondata">
                                            <el-badge :value="index + 1" class="item" color="black"></el-badge>
                                            <el-text tag="b" size="defalut">{{ sdata.name }}</el-text>
                                            <el-text tag="sub" size="small">{{ sdata.mainposts }}</el-text>
                                        </el-row>
                                    </el-tab-pane>
                                    <el-tab-pane label="活动">
                                        <el-row v-for="(adata, index) in activedata">
                                            <el-badge :value="index + 1" class="item" color="default"></el-badge>
                                            <el-text tag="b" size="defalut">{{ adata.name }}</el-text>
                                            <el-text tag="sub" size="small">{{ adata.num }}</el-text>
                                        </el-row>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-card>
                        
                        </el-main>
                    </el-container>
                </div>
            </el-main>
            <el-footer>

            </el-footer>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.home {

    .list {
        .el-aside {
            background-color: #D1CFB9;

            .el-main {
                background-color: #D1CFB9;
            }
        }
    }

    .el-aside {
        background-color: #D1CFB9;

    }

    .el-header {
        background: url('@/assets/login_bg.jpg') no-repeat center / cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 200px;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }

        .el-input {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

    }

    .el-main {
        background-color: #D1CFB9;

        .el-aside {
            .el-check-tag {
                margin: 0 auto;
                margin-bottom: 20px;
                margin-left: 10px;

            }

            .el-card {
                margin: 0 auto;
                margin-bottom: 20px;
                margin-left: 270px;
                background-color: #F0EFE2;

                .el-text {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                }
            }
        }

        .el-main {
            .el-card {
                margin: 0 auto;
                margin-bottom: 20px;
                margin-right: 200px;
                background-color: #F0EFE2;

                .el-tabs {
                    background-color: #F0EFE2;

                    .el-row {
                        display: flex;
                        align-items: left;
                        margin: 0 auto;
                        margin-bottom: 7px;

                        .el-badge {
                            align-items: left;
                        }

                        .el-text {
                            display: flex;
                            align-items: left;
                            margin: 0 auto;
                        }
                    }
                }
            }

            .el-calendar {
                margin: 0 auto;
                margin-bottom: 40px;
                margin-right: 200px;

            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D1CFB9;


    }

}
</style>